<template>
	<div class="app-container">
		
		<el-row>
		<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
		  <el-form-item label="客户端ID" prop="sbClientid">
		    <el-input
		      v-model="queryParams.sbClientid"
		      placeholder="请输入客户端ID"
		      clearable
		      @keyup.enter="handleQuery"
		    />
		  </el-form-item>
		  <el-form-item label="设备名称" prop="sbName">
		    <el-input
		      v-model="queryParams.sbName"
		      placeholder="请输入设备名称"
		      clearable
		      @keyup.enter="handleQuery"
		    />
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
		    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
		  </el-form-item>
		</el-form>
		</el-row>
		
		
		<el-row>
		<el-form :inline="true" label-width="68px">
		<el-form-item label="体测学生">
		  <el-select v-model="mqttData.schoolId" @change="schoolChange" placeholder="请选择学校" :disabled="isXxidFlag">
		    <el-option
		      v-for="d in dept_self"
		      :key="d.value"
		      :label="d.label"
		      :value="d.value"
		    />
		  </el-select>
		  <el-select v-model="mqttData.classId" @change="classChange" placeholder="请选择班级">
			<el-option
			  v-for="c in classList2"
			  :key="c.value"
			  :label="c.label"
			  :value="c.value"
			/>
		  </el-select>
		  <el-select v-model="mqttData.student" @change="studentChange" placeholder="请选学生" filterable>
			<el-option
			  v-for="c in studentList"
			  :key="c.id"
			  :label="c.xsName"
			  :value="c.id"
			/>
		  </el-select>
		</el-form-item>	
		<el-form-item label="评分标准" prop="jcsjXmid" label-width="100">
			<el-select filterable v-model="mqttData.projectTypeId" placeholder="选择评分标准">
				<el-option
				  v-for="d in tctypeList"
				  :key="d.id"
				  :label="d.xmflTitle"
				  :value="d.id"
				/>
			</el-select>
		</el-form-item>
		</el-form>
		</el-row>
		
		<div class="sblist">
		<el-card style="max-width: 420px" v-for="sb in shebeiList" >
	      <template #header>
				<div class="card-header">
					<el-tooltip class="box-item" effect="dark" :content="getDeptName(sb.sbXxid)" placement="top">
					<span style="float: left;">{{sb.sbName}}({{sb.sbClientid}})</span>
					</el-tooltip>
					<span style="float: right;">
						<el-tag type="warning" v-if="sb.sbIszx==0">离线</el-tag>
						<el-tag  v-if="sb.sbIszx==1">在线</el-tag>
						<el-button type="primary" size="small" @click="handleUpdateState(sb)" icon="RefreshLeft" style="margin-left: 5px;" />
					</span>
				</div>
	      </template>
		<div>
		<el-scrollbar class="p-tyleScrollbar">
		<div class="p-type">
			<template v-for="(pro,index) in sb.shebeiProjectList" :key="index">
				<div v-if="pro.disable" style="cursor:pointer;" >
				<el-tooltip class="box-item" effect="dark" :content="pro.tooltip" placement="bottom" :disabled="pro.tooltip==''">
					<el-tag  @click="onClickElTag(sb,pro)" :type="pro.type">
						<svg-icon :icon-class="pro.icon" />
						<span class="proTitle" :alt="pro.xmMc">
						{{pro.xmMc}}
						</span>
					</el-tag>
				</el-tooltip>
				</div>
			</template>
			
			<!-- 
			<div>
				<el-check-tag :checked="sbListStatus.project[0].checked" :type="sbListStatus.project[0].type" @change="onChange1" disabled>
					<svg-icon icon-class="tizhong_1" />
					<br/>
					体重BMI
				</el-check-tag>
			</div>
			<div>
				<el-check-tag checked>
				<svg-icon icon-class="paobu" /> <br/>跑步
				</el-check-tag>
			</div>
			<div>
				<el-check-tag checked>
				<svg-icon icon-class="iconfhl" /> <br/>肺活量
				</el-check-tag>
			</div>
			<div>
				<el-check-tag checked>
				<svg-icon icon-class="zuo" /> <br/>坐位体前屈
				</el-check-tag>
			</div>
			<div>
				<el-check-tag checked>
				<svg-icon icon-class="tiaosheng_3" /> <br/>跳绳
				</el-check-tag>
			</div>
			<div>
				<el-check-tag checked>
				<svg-icon icon-class="lidingtiaoyuan-copy" /> <br/>立定跳远
				</el-check-tag>
			</div>
			<div>
				<el-check-tag checked>
				<svg-icon icon-class="yintixiangshang-" /> <br/>引体向上
				</el-check-tag>
			</div>
			<div>
				<el-check-tag checked>
				<svg-icon icon-class="yangwoqizuo" /> <br/>仰卧起坐
				</el-check-tag>
			</div>
			<div>
				<el-check-tag checked>
					<svg-icon icon-class="paobu4" /> <br/>1000米往返跳
				</el-check-tag>
			</div>
			<div>
				<el-check-tag checked>
				<svg-icon icon-class="-pt" /> <br/>800米往返跳
				</el-check-tag>
			</div>
			 -->
		</div>
		</el-scrollbar>
		</div>
	      <template #footer>
			 <el-button type="primary" :disabled="!sb.start" @click="publish(1,sb)" :icon="VideoPlay">开始</el-button>
			 <el-button type="danger" :disabled="!sb.end" @click="publish(2,sb)" :icon="VideoPause">停止</el-button>
			 <el-button type="primary" :disabled="!sb.start" @click="publishMQTTDataTest(sb)" :icon="VideoPlay">模拟测试</el-button>
			 
		  </template>
		</el-card>
		</div>
		<pagination
		  v-show="total>0"
		  :total="total"
		  :pageSizes="[4,8,12]"
		  v-model:page="queryParams.pageNum"
		  v-model:limit="queryParams.pageSize"
		  @pagination="getList"
		/>
	</div>
	
</template>

<script setup name="Tc">
import { checkPermi, checkRole } from "@/utils/permission"; // 1. 导入权限判断函数
import { listDept } from "@/api/system/dept";
import { listStudent} from "@/api/tc/student";
import { listClass} from "@/api/tc/class";
import { listShebei,updateShebeiState} from "@/api/tc/shebei";
import { listTctype} from "@/api/tc/tctype";
import { getUUID} from "@/api/tc/operate";
import { VideoPlay, VideoPause} from '@element-plus/icons-vue'
import SvgIcon from "@/components/SvgIcon";
import request from '@/utils/request'
import mqtt from 'mqtt'
import useUserStore from "@/store/modules/user";
import useMqttStore from "@/store/modules/mqtt";
import { listProject} from "@/api/tc/project";
const { proxy } = getCurrentInstance();



const userStore = useUserStore();
const mqttStore = useMqttStore();
// const sbListStatus= ref([]);


const shebeiList = ref([]);
const tcProjectList = ref([]);
const tctypeList = ref([]);
const total = ref(0);
const loading = ref(true);
const showSearch = ref(true);

// const xsSchool = ref();
// const xsClassj = ref();
// const xsName = ref();
const dept_self = ref([]);
const studentList = ref([]);
const classList = ref([]);
const classList2 = ref([]);
const isXxidFlag=ref(false);
const tmpProPar={pageNum: 1,pageSize: 999,xmStatus:'1'};

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 4,
    sbClientid: null,
    sbLoginuser: null,
    sbTctype: null,
    sbIszx: null,
    sbIsqy: '1',
    sbXytype: null,
    sbTcdatatype: null,
    sbIsdel: null,
    sbJiedian: null,
    sbCreatetime: null,
    sbXxid: null,
    sbName: null,
	projectid:null
  },
  mqttData:{
	  deviceId: null,
	  type:"A",//A体测 B娱乐
	  schoolId:null,
	  classId:null,
	  classNjId:null,
	  student:null,
	  studentId:null,
	  teacher:null,
	  projectId:null,
	  projectTypeId:null,
	  sex:null,
	  studentName:null,
	  photo:null
  }
});
const { queryParams,mqttData } = toRefs(data);
onMounted(() => {
	// console.log(mqtt)
	// console.log(mqttStore.client)
	// console.log(topic("client1"));
	// getList();
	getProjectList();
	getDeptInfo();
})

/** 查询设备列表 */
function getList() {
	// console.log("-----tc getList----")
  loading.value = true;
  
	if(checkRole(['admin','common'])){
	  // queryParams.value.sbXxid=null;
	  queryParams.value.sbXxid=mqttData.value.schoolId;
	}else{
	  queryParams.value.sbXxid=userStore.user.deptId;
	}
  listShebei(queryParams.value).then(response => {
	// console.log(response.rows)
    shebeiList.value = response.rows;
    total.value = response.total;
    loading.value = false;
	initsbListStatus();
  });
}

/** 查询体测项目列表 */
function getProjectList() {
  loading.value = true;
  listProject(tmpProPar).then(response => {
    tcProjectList.value = response.rows;
    loading.value = false;
	getProjectTypeList();
  });
}

/** 查询评分标准列表 */
function getProjectTypeList() {
  loading.value = true;
  let tmp={pageNum: 1,pageSize: 500,xmflStatus:'1'};
  listTctype(tmp).then(response => {
    tctypeList.value = response.rows;
    loading.value = false;
  });
}
async function getSJUUID(){
	return new Promise((resolve, reject) => {
	    // 异步操作，
		getUUID().then(response => {
	      resolve(response.data);
		});
	  });
}
function getDeptInfo(){
		// console.log(userStore.user)
		if(checkRole(['admin','common'])){
			listDept({}).then(response => {
			  	response.data.forEach(function (element) {
			  	  // 遍历数组，对每个元素进行操作
				   if(element.xxlevel !=null && element.xxlevel != ''){
						dept_self.value.push({"value":element.deptId,"label":element.deptName});
				   }
			  	});
				mqttData.value.schoolId=dept_self.value[0].value;
				getClassList(null);
			});
			isXxidFlag.value=false;
		}else{
			dept_self.value.push({"value":userStore.user.deptId,"label":userStore.user.dept.deptName});
			mqttData.value.schoolId=dept_self.value[0].value;
			isXxidFlag.value=true;
			getClassList(mqttData.value.schoolId);
		}
}

function getClassList(bjid){
	// if(checkRole(['admin','common'])){
	// 	bjid=null;;
	// }else{
	// 	bjid=userStore.user.deptId;
	// }
	listClass({"pageNum": 1,"pageSize": 500,"bjXxid" : bjid}).then(response => {
		response.rows.forEach(function (el) {
		  // 遍历数组，对每个元素进行操作
			classList.value.push({"value":el.id,"label":el.bjName,"xxid":el.bjXxid,"njid":el.bjNj});
		});
		if(classList.value.length > 0){
			mqttData.value.classId=classList.value[0].value;
			mqttData.value.classNjId=classList.value[0].njid;
			schoolChange(classList.value[0].xxid)
			getStudentList(dept_self.value[0].value,classList.value[0].value);
		}
		// getList();
	});
}
function getStudentList(a,b) {
			// console.log(a)
			// console.log(b)
   if(a==null || a==null || b=='' || b==''){
	   proxy.$modal.msgSuccess("学校和班级不能为空!");
	   return;
   }
  loading.value = true;
  listStudent({"pageNum": 1,"pageSize": 9999,"xsSchool" : a,"xsClassj" : b}).then(response => {
    studentList.value = response.rows;
	// console.log(response.rows)
    loading.value = false;
  });
}
function schoolChange(e){
	classList2.value= classList.value.filter(function(currentValue,index,arr){
		// console.log(currentValue)
		return currentValue.xxid == e ;
	});
	
	if(classList2.value.length==0){
		mqttData.value.classId=null;
		mqttData.value.classNjId=null;
	}else{
		mqttData.value.classId=classList2.value[0].value;
		mqttData.value.classNjId=classList2.value[0].njid;
	}
	handleQuery();
}

function classChange(e){
	for(let i=0;i<classList2.value.length;i++){
		if(classList2.value[i].value==e){
			mqttData.value.classNjId=classList2.value[i].njid;//年级
			break;
		}
	}
	// console.log("年级"+mqttData.value.classNjId)
	getStudentList(mqttData.value.schoolId,mqttData.value.classId);
}
function studentChange(e){
	for(let i=0;i<studentList.value.length;i++){
		if(studentList.value[i].id==e){
			mqttData.value.studentId=studentList.value[i].xsSfz;//学生身份证
			mqttData.value.sex=studentList.value[i].xsSex;
			mqttData.value.studentName=studentList.value[i].xsName;
			mqttData.value.photo=studentList.value[i].xsZp;
			return;
		}
	}
}
/** 同步状态按钮操作 */
function handleUpdateState(sb) {
	// console.log(row)
	// console.log(list)
	// let data={"clientid":row.sbClientid};
    // open.value = false;
	updateShebeiState({id:sb.id,sbClientid:sb.sbClientid}).then(response => {
		// console.log(response)
		proxy.$modal.msgSuccess("设备状态刷新成功");
		sb.sbIszx=response.data.sbIszx;
		// for (let i = 0; i < shebeiList.value.length; i++) {
		//     if(response.data.id==shebeiList.value[i].id){
		// 		shebeiList.value[i]=response.data;
		// 		return;
		// 	}
		// }
		
		// open.value = false;
	});
}
function initsbListStatus(){
	for(let i of shebeiList.value){
		let tmp=[];
		for(let p of tcProjectList.value){
			let tmp2={};
			tmp2["id"]=p.id;
			tmp2["icon"]=p.icon;
			tmp2["xmMc"]=p.xmMc;
			tmp2["disable"]=false;//项目不可用状态
			tmp2["type"]="info"
			tmp2["tooltip"]="";
			for(let j of i.shebeiProjectList){
				if(p["id"]==j["projectid"]){ //在设备下的项目 并且 在线的设备 && i.sbIszx==1
					tmp2["tooltip"]=p["xmMc"];
					tmp2["disable"]=true
					tmp2["type"]=""
				}
			}
			// tmp2["pro"]=p;
			tmp.push(tmp2);
		}
		i.shebeiProjectList=tmp;
		i.start=false;
		i.end=false;
		  // if(i.id == row.projectid) tcProjectTpRef.value.toggleRowSelection(i,true);
	}
	// console.log(shebeiList.value)
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}





const onClickElTag = (sb,pro) => {
	if(sb.sbIszx==0){
		proxy.$modal.msgError(`设备 ${sb.sbName}(${sb.sbClientid} 不在线！`);
		return;
	}
	let selectStatus="danger";
	let tmp={};
	tmp["id"]=pro.id;
	tmp["type"]=pro.type;
	// console.log(e)
	// console.log(e.disable)
	//type("info" 禁用 "" 正常 "warning" 选中)  selectStatus选中
	// shebeiList.value
	if(!pro.disable){
		//如果禁用
	}else{
		for(let j of sb.shebeiProjectList){
			if(j.disable){
				j.type="";
				sb.selected="";
				sb.start = false;
				sb.end = false;
			}
		}
		// console.log("type "+tmp.type)
		if(""==tmp.type){
			pro.type = selectStatus
			sb.start = true;
			sb.end = true;
			sb.selected=pro.id;
		}else if(selectStatus==tmp.type){
			pro.type = ""
			sb.start = false;
			sb.end = false;
			sb.selected="";
		}
		
	}
}
const getDeptName=(id)=>{
	for(let d of dept_self.value){
		 if(id==d.value){
			 return d.label;
		 }
	}
}

















/*==================MQTT========================*/
// const mqtt = require('mqtt')
// 连接选项
const options = {
      clean: true, // true: 清除会话, false: 保留会话
      connectTimeout: 40000, // 超时时间
      // 认证信息
      clientId: 'tcclients_'+userStore.id+"_"+new Date().getTime(),//'tcclients_'+userStore.id+'_'+new Date().getTime()
      username: 'tc_clients',
      password: 'tc_clients123456!',
}

// 连接字符串, 通过协议指定使用的连接方式
// ws 未加密 WebSocket 连接
// wss 加密 WebSocket 连接
// mqtt 未加密 TCP 连接
// mqtts 加密 TCP 连接
// wxs 微信小程序连接
// alis 支付宝小程序连接
// const connectUrl = 'ws://127.0.0.1:8083/mqtt';
const connectUrl = 'ws://'+import.meta.env.VITE_APP_TCSERVER+':8083/mqtt';
if(mqttStore.client==null)mqttStore.client=mqtt.connect(connectUrl, options);
mqttStore.client.on('reconnect', (error) => {
    console.log('正在重连:', error)
})

mqttStore.client.on('error', (error) => {
    console.log('连接失败:', error)
})

mqttStore.client.on('message', (topic, message) => {
  console.log('收到消息：', topic, message.toString())
  proxy.$modal.msgSuccess(`设备 ${topic} 已收到！`);
  unsub(topic);
})


//订阅主题
function sub(topic){
	mqttStore.client.subscribe(topic, { qos }, (error) => {
	  if (error) {
		console.log('subscribe error:', error)
		return
	  }
	  console.log(`Subscribe to topic '${topic}'`)
	})
}
//取消订阅
function unsub(topic){
	// const topic = '/WebSocket/mqtt'
	let qos = 0
	mqttStore.client.unsubscribe(topic, { qos }, (error) => {
	  if (error) {
		console.log('unsubscribe error:', error)
		return
	  }
	  console.log(`取消订阅 topic: ${topic}`)
	})
}

//发布消息
const topic = (t) => 'tcxt/'+t+'/usr';//发布给体测设备主题
const topic_dt = (t) => 'tcxt/'+t+'/dev';//订阅主题

const topictest = (t) => 'tcxt/'+t+'/dev';//模拟体测设备直接发给后端服务器
const qos = 1;

const publish=async (d,sb) => {
		
	// let uuid="383C11D420304E22B8C477998A45AFCE"
	// console.log(uuid)
	// console.log(sb);
	let uuid=await getSJUUID();
	let deviceId=sb.sbClientid;
	let type="A";//A体测 B娱乐
	let schoolId=mqttData.value.schoolId;
	let classId=mqttData.value.classId;
	let classNjId=mqttData.value.classNjId;
	let student=mqttData.value.student;
	let studentId=mqttData.value.studentId;
	let teacher="szls";
	let projectId=sb.selected;
	let projectTypeId=mqttData.value.projectTypeId;
	let sex=mqttData.value.sex;
	let operate="A";//A开始 B结束
	let studentName=mqttData.value.studentName;
	let photo=mqttData.value.photo;//http://sdsssss/photo.jpg
	let isdouble=false;//是否为两个设备
	
	if(isNull(deviceId,type,schoolId,classId,classNjId,student,studentId,teacher,projectId,projectTypeId,sex,uuid,photo)){
		proxy.$modal.alertWarning("所有数据不能空！")
		return;
	}
	
	unsub(topic(deviceId));
	switch(sb.selected){
		case 2 :{
			//50米跑
			isdouble=true;
			break;
		}
		case 5 :{
			//坐位体前屈 
			break;
		}
		case 7 :{
			//仰卧起坐
			break;
		}
		case 9:{
			//跳远
			break;
		}
		case 10:{
			//引体向上
			break;
		}
		case 14:{
			//摸高
			break;
		}
		
		default :{
			proxy.$modal.alertWarning("此项目暂未开放！")
			return;
		}
	}
	if(d==1){
		//开始
			operate="A";//A开始 B结束
	}
	if(d==2){
		//结束
		operate="B";//A开始 B结束
	}
	let payload=`{
				"deviceId": "${deviceId}",
				"type": "${type}",
				"schoolId": "${schoolId}",
				"classId": "${classId}",
				"classNjId": "${classNjId}",
				"student": "${student}",
				"studentId": "${studentId}",
				"teacher": "${teacher}",
				"projectId": "${projectId}",
				"projectTypeId": "${projectTypeId}",
				"studentName": "${studentName}",
				"sex": "${sex}",
				"UUID":"${uuid}",
				"operate":"${operate}",
				"photo":"${photo}"
			}`
	console.log("topic:"+topic(deviceId))
	console.log("payload",payload)
	sub(topic_dt(deviceId));//订阅
	mqttStore.client.publish(topic(deviceId), payload, { qos }, (error) => {
	  if (error) {
		console.error(error)
	  }else{
		proxy.$modal.alertSuccess("发送成功!");
	  }
	})
		console.log("----------------------------")
	
	if(isdouble){
		console.log("----------------------------")
		//如果为两个设备再发给终端设备一个指令
		deviceId=deviceId.substring(0,deviceId.length-1)+"2";
		let payload=`{
					"deviceId": "${deviceId}",
					"type": "${type}",
					"schoolId": "${schoolId}",
					"classId": "${classId}",
					"classNjId": "${classNjId}",
					"student": "${student}",
					"studentId": "${studentId}",
					"teacher": "${teacher}",
					"projectId": "${projectId}",
					"projectTypeId": "${projectTypeId}",
					"studentName": "${studentName}",
					"sex": "${sex}",
					"UUID":"${uuid}",
					"operate":"${operate}",
					"photo":"${photo}"
				}`
		console.log("topic:"+topic(deviceId))
		console.log("payload",payload)
		// sub(topic_dt(deviceId));//订阅
		mqttStore.client.publish(topic(deviceId), payload, { qos }, (error) => {
		  if (error) {
			console.error(error)
		  }else{
			proxy.$modal.alertSuccess("发送成功!");
		  }
		})
	}
}
 
/**
 * 
 * "projectData": {
	  "data_ty": "18",//  跳远 单位厘米
	  "data_ytxs": "18",//  引体向上 单位厘米
	  "data_ywqz": "18",// 仰卧起坐 个数
	  "data_zwtgq": "18",// 坐位体前屈 单位里面
	  "data_50e": "18",// 50米开始时间	是一个本地时间例如15:23:15:89	  15 时 23分15秒89
	  "data_50s": "18",// 50 米结束时间
	  "data_800e": "18",// 800米开始时间
	  "data_800s": "18",//800 米结束时间
	  "data_1000e":"18",1000米开始时间
	  "data_1000s":"18"// 1000米结束时间	时间格式统一为50米的一样
	}
 */

const publishMQTTDataTest=async (sb)=>{
	let uuid=await getSJUUID();
	// let uuid="383C11D420304E22B8C477998A45AFCE"
	// console.log(uuid)
	// console.log(sb);
	let deviceId=sb.sbClientid;
	let type="A";//A体测 B娱乐
	let schoolId=mqttData.value.schoolId;
	let classId=mqttData.value.classId;
	let classNjId=mqttData.value.classNjId;
	let student=mqttData.value.student;
	let studentId=mqttData.value.studentId;
	let teacher="szls";
	let projectId=sb.selected;
	let projectTypeId=mqttData.value.projectTypeId;
	let sex=mqttData.value.sex;
	let studentName=mqttData.value.studentName;
	let projectData={};
	let projectDataSz="";
	if(isNull(deviceId,type,schoolId,classId,classNjId,student,studentId,teacher,projectId,projectTypeId,sex,projectData,uuid)){
		proxy.$modal.alertWarning("所有数据不能空！")
		return;
	}
	let selectPro="";
	switch(sb.selected){
		case 2 :{
			//50米跑
			selectPro="data_50e";
			break;
		}
		case 5 :{
			//坐位体前屈 
			// projectData["data_ytxs"]=value;
			selectPro="data_zwtqq";
			// selectPro="data_50s";
			
			break;
		}
		case 7 :{
			//仰卧起坐
			selectPro="data_ywqz";
			break;
		}
		case 9:{
			//跳远
			selectPro="data_ty";
			break;
		}
		case 10:{
					//引体向上
			selectPro="data_ytxs";
			break;
		}
		case 14:{
			//摸高
			selectPro="data_mg";
			break;
		}
		
		default :{
			proxy.$modal.alertWarning("此项目暂未开放！")
			return;
		}
	}
	proxy.$prompt("输入模拟体测数据值","提示",{
	  confirmButtonText: "确定",
	  cancelButtonText: "取消",
	  }).then(({value})=>{
		// if(!(!isNaN(parseFloat(value)) && isFinite(value))){
		// 	proxy.$modal.alertWarning("体测数值只能是数值型!");
		// 	return;
		// }
		projectData[selectPro]=value;
		let payload=`{
					"deviceId": "${deviceId}",
					"type": "${type}",
					"schoolId": "${schoolId}",
					"classId": "${classId}",
					"classNjId": "${classNjId}",
					"student": "${student}",
					"studentId": "${studentId}",
					"teacher": "${teacher}",
					"projectId": "${projectId}",
					"projectTypeId": "${projectTypeId}",
					"studentName": "${studentName}",
					"sex": "${sex}",
					"UUID":"${uuid}",
					"projectData": ${JSON.stringify(projectData)}
				}`
				//topic(options.clientId)  topic(deviceId)
		if("data_50e"==selectPro){
				console.log(payload)
			mqttStore.client.publish(topictest(deviceId), payload, { qos }, (error) => {
			  if (error) {
				console.error(error)
			  }else{
				proxy.$modal.alertSuccess("模拟发送成功!");
			  }
			})
			//隔2秒后发送结束数据
			setTimeout(function() {
				if(selectPro=="data_50e")selectPro="data_50s";
				projectData={}
				projectData[selectPro]=value;
				payload=`{
							"deviceId": "${deviceId}",
							"type": "${type}",
							"schoolId": "${schoolId}",
							"classId": "${classId}",
							"classNjId": "${classNjId}",
							"student": "${student}",
							"studentId": "${studentId}",
							"teacher": "${teacher}",
							"projectId": "${projectId}",
							"projectTypeId": "${projectTypeId}",
							"studentName": "${studentName}",
							"sex": "${sex}",
							"UUID":"${uuid}",
							"projectData": ${JSON.stringify(projectData)}
						}`
				console.log(payload)
				mqttStore.client.publish(topictest(deviceId), payload, { qos }, (error) => {
				  if (error) {
					console.error(error)
				  }else{
					proxy.$modal.alertSuccess("模拟发送成功!");
				  }
				})
			}, 2000);
		}else{
			mqttStore.client.publish(topictest(deviceId), payload, { qos }, (error) => {
			  if (error) {
				console.error(error)
			  }else{
				proxy.$modal.alertSuccess("模拟发送成功!");
			  }
			})
		}
	}).catch(() => {
		// console.log(123)
	});
	// proxy.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
	//   confirmButtonText: "确定",
	//   cancelButtonText: "取消",
	//   closeOnClickModal: false,
	//   inputPattern: /^.{5,20}$/,
	//   inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
	//   inputValidator: (value) => {
	//     if (/<|>|"|'|\||\\/.test(value)) {
	//       return "不能包含非法字符：< > \" ' \\\ |"
	//     }
	//   },
	// }).then(({ value }) => {
	//   resetUserPwd(row.userId, value).then(response => {
	//     proxy.$modal.msgSuccess("修改成功，新密码是：" + value);
	//   });
	// }).catch(() => {});
		
};
const isNull=(...par)=>{
	// par.forEach((v,i,par)=>{
	// 	console.log(v)
	// 	if(v==null  || v =='') return true;
	// })
	for(let i=0;i<par.length;i++){
		if(par[i]==null  || par[i] =='') {
			return true;
		}
	}
	return false;
}

/* 

//订阅主题
client.subscribe(topic, { qos }, (error) => {
  if (error) {
	console.log('subscribe error:', error)
	return
  }
  console.log(`Subscribe to topic '${topic}'`)
})
//取消订阅
const topic = '/WebSocket/mqtt'
const qos = 0
client.unsubscribe(topic, { qos }, (error) => {
  if (error) {
    console.log('unsubscribe error:', error)
    return
  }
  console.log(`unsubscribed topic: ${topic}`)
})
//发布消息
// 设置发布的主题、消息及 QoS
const topic = '/WebSocket/mqtt'
const payload = 'WebSocket mqtt test'
const qos = 0

client.publish(topic, payload, { qos }, (error) => {
  if (error) {
    console.error(error)
  }
})
//接收消息
client.on('message', (topic, payload) => {
  console.log(
    'Received Message: ' + payload.toString() + '\nOn topic: ' + topic
  )
})
//断开连接
if (client.connected) {
  try {
    client.end(false, () => {
      console.log('disconnected successfully')
    })
  } catch (error) {
    console.log('disconnect error:', error)
  }
}
 */
/*==================MQTT========================*/

const userinfo = reactive({
  token: userStore.token,
  id: userStore.id,
  name: userStore.name,
  avatar: userStore.avatar,
  roles: userStore.roles,
  permissions: userStore.permissions
});	
	
function getTest() {
	  return request({
	    url: '/tc/test',
	    method: 'get',
	    params: ''
	  })
};
function test(){
	getTest().then(res => {
	  console.log(res)
	});
}



</script>

<style>
.sblist{
	width:100%;
	display:flex;
	flex-wrap: wrap;
	/*justify-content: space-between;  控制主轴方向上的间隔 */
	/* align-items: center; 控制交叉轴方向上的对齐，这里用来间隔 */
	align-items:flex-start;
	gap: 5px;
	
}
.p-type {
  display: flex;
  justify-content: left;  
  /* width:400px; */
  flex-wrap: wrap;
  /* height: 200px; */
}
.p-tyleScrollbar{
  height: 210px;
  width: 400px;
}
.p-type > div {
  /* flex: 1; */
  text-align: center;
  width:90px;
  height: 100px;
  margin-top: 5px;
  margin-right: 5px;
  border: .5px solid var(--el-border-color);
}


.p-type > div > span {
  width: 100%;
  height: 100%;
  line-height: 50px;
  font-size: 0.775rem;
  padding: 0;
}

.p-type .proTitle{
	display: block;
	line-height: 50px;
	width:90px;
	white-space: nowrap; /* 确保文本不换行 */
	overflow: hidden; /* 隐藏超出容器的内容 */
	text-overflow: ellipsis;
}
.p-type .svg-icon{
  width: 1.75rem;
  height: 1.75rem;
  vertical-align:bottom;
}
/* 
.p-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
	 */
.el-tag.el-tag--danger {
	border-color: red;
}
</style>